<template>
  <div>
    <el-button @click.native.prevent="insertLeftMenu()" type="success" style="left: 50px">添加信息</el-button>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;"
              row-key="id" border default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

      <el-table-column prop="name" label="菜单名称" width="150"></el-table-column>
      <el-table-column prop="pid" label="父级id" width="80" v-if="false"></el-table-column>
      <el-table-column prop="path" label="菜单路由" width="150"></el-table-column>
      <el-table-column prop="icon" label="菜单图标" width="150"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable width="150"></el-table-column>
      <el-table-column prop="status" label="菜单状态 0 开启 1禁用" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.status === 0 ? '开启' : '禁用'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="菜单等级" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.type === 1 ? '一级' : '二级'}}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteLeftMenu(scope.$index, scope.row)" type="text" size="small">移除
          </el-button>
          <el-button @click.native.prevent="updateLeftMenu(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click.native.prevent="addLeftMenu(scope.row)" type="text" size="small">添加子级</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'left-menu',
    data () {
      return {
        tableData: [{
          id: 99999,
          pid: 0,
          name: '菜单名称',
          path: '菜单路由',
          icon: 'el-icon-user-solid',
          createTime: '2016-05-01',
          status: 0,
          type: 1,
          children: [{
            id: 222222222222,
            pid: 99999,
            name: '菜单名称',
            path: '菜单路由',
            icon: 'el-icon-user-solid',
            createTime: '2016-05-01',
            status: 0,
            type: 1
          }, {
            id: 222222222223,
            pid: 99999,
            name: '菜单名称',
            path: '菜单路由',
            icon: 'el-icon-user-solid',
            createTime: '2016-05-01',
            status: 0,
            type: 1
          }]
        }]
      }

    },
    created () {
      this.$http.getRequest('user/leftMenu/queryLeftMenu', {}).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
        } else if (res.data.code == 403) {
          this.$message.info('无操作权限！')
        } else {
          this.$message.info(res.data.message)
        }
      }).catch(err => {
        this.$message.info(err)
      })
    },
    methods: {
      //删除
      deleteLeftMenu (index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //将真实的id传给后端
          var data = {id: row.id}
          this.$http.getRequest('user/leftMenu/addLeftMenu', data).then(res => {
            if (res.data.code == 200) {
              this.$message.success('恭喜！删除成功！')
            } else if (res.data.code == 403) {
              this.$message.info('没有相关权限！')
            } else {
              this.$message.info(res.data.message)
            }
          }).catch(err => {
            this.$message.info(err)
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
      //修改
      updateLeftMenu (row) {
        this.$router.push({path: '/updateLeftMenu', query: {form: row}})
      },
      //添加子集
      addLeftMenu (row) {
        this.$router.push({path: '/addLeftMenu', query: {form: row}})
      },
      //添加
      insertLeftMenu () {
        this.$router.push('/insertLeftMenu')
      }
    },
  }
</script>

<style scoped>

</style>
